<script setup>
import {useSys} from '@/hooks/useSys'
import {ref, watch} from 'vue'

const props = defineProps({
  modelValue: {
    type: Number,
    default: 0
  },
  list: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['update:modelValue', 'change'])

const index = ref(props.modelValue)

watch(props, (newVal) => {
  if (newVal.modelValue !== index.value) {
    index.value = newVal.modelValue
  }
})

const trigger = (idx) => {
  index.value = idx
  emit('update:modelValue', idx)
  emit('change', idx)
}

</script>

<template>
  <view class="tabbar-container">
    <view class="tabber-title-container">
      <view class="tabber-title-item-container" v-for="(item,idx) of props.list" :key="idx" @click="trigger(idx)">
        <text class="tabber-title-item">{{ item.text }}</text>
        <view class="tabber-title-item-line" v-if="idx === index"></view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
  .tabber-title-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    height: 100rpx;
    background-color: #fff;
    .tabber-title-item-container {
      display: flex;
      flex-direction: column;
      position: relative;
      flex: 1;
      padding-top: 26rpx;
      align-items: center;
      text-align: center;
      .tabber-title-item {
        color: #282727;
        text-align: center;
        font-size: 40rpx;
        font-style: normal;
        font-weight: 600;
        line-height: 56rpx;
      }
      .tabber-title-item-line {
        width: 60rpx;
        height: 8rpx;
        border-radius: 6rpx;
        background-color: #7FCB81;
      }
    }
  }
</style>
